// Sandstorm - Personal Cloud Sandbox
// Copyright (c) 2014 Sandstorm Development Group, Inc. and contributors
// All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// Include fonts (a somewhat verbose incantation) from _fonts.scss
@import "_fonts.scss";
@import "_icons.scss";

@import "_geometry.scss";
@import "_colors.scss";

// Some utility partials intended to be extended or mixin'd
@import "_partials.scss";

// Styles to set global default appearance for elements when focused
@import "_focus.scss";

html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: normal;
  background-color: white;
  &.modal-shown {
    // When a modal is being shown, make it so only the modal scrolls.
    overflow-y: hidden;
  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

// Some reusable components that we make use of in multiple places
@import "_widgets.scss";

// Styles used by sandstorm-ui-topbar
@import "_topbar.scss";

// Styles used by the user account settings page
@import "_account.scss";

// Styles used by the "about" page.
@import "_about.scss";

// Styles used by the powerbox popups.
@import "_powerbox.scss";

// =======================================================================================

a.copy-me {
  // A link which is intended to be copy/pasted, not followed. Clicking on the link will select
  // it for copying.

  display: block;
  margin: 8px;
  border: 1px solid #ccc;
  overflow: hidden;
  font-family: monospace;
  text-decoration: none;
  color: inherit;
}

// =======================================================================================
// pre-refactor styles
// =======================================================================================
//
// Below this point are styles that predate the start of The Great Frontend Refactor, and/or styles
// which apply to HTML which itself has not been refactored. See:
//
//     https://oasis.sandstorm.io/shared/lnQfpUDofcbGN9Z-f7BIU8L6vudbcpLJZ7hScQ64zLD
//
// TODO(cleanup): Refactor these styles and merge them into the clean part of the stylesheet,
//   above.

#admin-alert-icon.countdown-second,
#admin-alert-icon.countdown-now {
  // Turn red when there's less than a minute left.
  background-color: #e82538;
}

.popup .token-petname:hover {
  cursor: pointer;
  color: white;
  background-color: #888;
}

button.revoke-token, button.revoke-access {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  border: none;
  color: transparent;
  background-color: transparent;
  cursor: pointer;
  background-image: url("/close.svg");
}

.main-content, .first-sign-in-main-content, .demo-expired-main-content,
.identity-login-interstitial, .suspended-main-content {
  margin: 0;
  padding: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0px;
  color: $default-content-foreground-color;
  background-color: $default-content-background-color;
  overflow: auto;

  @media #{$desktop} {
    top: 32px;
    left: $navbar-width-desktop;
    &.shrink-navbar {
      left: $navbar-width-desktop-shrunk;
    }
    &.hide-navbar {
      left: 0;
    }
    transition: left 0.2s;
  }
  @media #{$mobile} {
    top: 48px;
  }
  a {
    font-weight: bold;
    text-decoration: none;
    color: $darker-purple-color;
  }
}

.main-content {
  // intro.js needs this element to have some numeric z-index, so that
  // it knows to add the introjs-fixParent class to it. We use 0 because
  // that is the value Chrome gives this element anyway, without specifying
  // it explicitly.
  z-index: 0;
}

.main-content.standalone {
  top: 0px;
  left: 0px;
}

@import "_grainlog.scss";

.centered-box {
  margin: 16px auto;
  max-width: 800px;
  font-size: 125%;
  h2 {
    margin-top: 0;
    font-size: 60px;
  }
  p {
    margin-bottom: 0;
  }
  p:nth-child(1) {
    margin-top: 0;
  }
}

// new app list (unified)
@import "_applist.scss";
// new grainlist (unified)
@import "_grainlist.scss";
// app details page
@import "_app-details.scss";
// app installation page
@import "_install.scss";
// referrals page
@import "_referrals.scss";

#storage-usage {
  margin: 16px 4px;
  font-size: 75%;
  font-weight: bold;
  color: #777;
}

#storage-usage.over-quota {
  color: red;
}

.main-content .grain-interstitial {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: $default-content-background-color;
  button.request-access, button.incognito-button, button.restore-from-trash {
    @extend %button-base;
    @extend %button-primary;
    font-weight: 600;
    padding: 8px;
    line-height: 1.33;
  }
}

#intro {
  background-color: #b6b6b6;
  overflow: auto;
  height: 100%;
  h1 {
    text-align: center;
    font-size: 100px;
    font-weight: bold;
    margin: 0 auto;
  }
  >p {
    text-align: center;
  }
  .build-tag {
    margin-top: 0;
  }

  &.has-splash {
    >.login-dialog {
      position: relative;
      z-index: 1;
      @media #{$desktop} {
        position: absolute;
        top: 64px;
        right: 64px;
        margin: 0;
      }
    }
    >iframe {
      position: absolute;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border: none;

      @media #{$mobile} {
        height: 1600px;
      }
    }
  }
}

div.grain-container {
  &.active-grain {
    z-index: 0;
    background: white;
  }
  &.inactive-grain {
    z-index: -2;
    display: none;
  }
  .signin-frame {
    position: absolute;
    z-index: 100;
  }
}

iframe.grain-frame {
  border: none;
  padding: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  position: absolute;
  background-color: white;
}

body.ios .main-content {
  /* iOS Safari refuses to scroll iframes inside fixed position divs. So under iOS, we change the
   * main-content div to be position relative and explicitly give it a size, so that the div is the
   * one scrolling.
   * -webkit-overflow-scrolling is a hint to iOS that the div should scroll correctly.
   */
  -webkit-overflow-scrolling: touch;
  position: relative;
  width: 100%;
  height: calc(100vh - #{$topbar-height-mobile});
}

#grain-loading-spinner {
  display: table;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
}

#api-token-popup {
  left: 250px;
  width: 450px;
}

#share-grain-popup {
  left: 250px;
  width: 450px;
}

#powerbox-offer-popup,
#powerbox-request-popup {
  left: 250px;
  width: 450px;
}

#powerbox-offer-popup h3,
#powerbox-request-popup > h3 {
  margin-top: 0px;
}

#powerbox-request-popup .error {
  color: red;
}

#powerbox-request-popup input {
  width: 250px;
}

.powerboxIcon {
  font-size: 32px;
  display: inline;
  position: fixed;
  margin-left: 2px;
}

div.popup>p {
  margin-top: 0;
}

div.popup h1 {
  font-size: 125%;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding: 4px;
  margin: 0;
}

div.popup hr {
  border: none;
  border-bottom: 2px solid #ccc;
  margin: 4px;
}

div.popup h2 {
  font-size: 110%;
  font-weight: bold;
  margin: 4px;
}

#sign-in-arrow {
  left: auto;
  right: 0;

  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.demo-box {
  width: 800px;
  height: 500px;
  margin: 64px auto;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;

  h2 {
    font-weight: normal;
    font-size: 24pt;
    margin: 56px 80px 1em;
    >a {
      font-weight: bold;
      color: black;
    }
  }
  p {
    margin: 1em 56px;
    font-size: 15pt;
    text-align: left;
    >a {
      font-weight: 600;
      color: $darker-purple-color;
    }
  }

  button {
    @include unstyled-button();
    display: block;
    width: 100%;
    height: 100px;
    background: linear-gradient(to right, black, #7f4b8c);
    color: white;
    font-size: 34pt;
    margin: 48px 0;
  }

  @media #{$mobile} {
    width: auto;
    height: auto;
    margin: 64px 8px;
    h2 {
      margin: 1em 32px;
    }
  }
  @media (max-width: 500px) {
    button {
      font-size: 28px;
    }
  }
}

#demo-expired {
  z-index: 1;
  >p, >h1, >h2, >h3, >h4 {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
  }
}

// Admin settings styles
@import "_new-admin.scss";

// Setup wizard styles
@import "_setup-wizard.scss";

body>.popup.admin-alert>.frame>p {
  display: block;
  margin: 16px;
}

#admin-alert-icon {
  display: inline-block;
  background-color: $sandstorm-purple-color;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  height: 28px;
  width: 28px;
  margin: 2px 2px;
  line-height: 28px;
  cursor: pointer;
}

@media screen and #{$mobile} {
  #demo.centered-box {
    width: 80%;
  }

  button#createDemoUser, #demo h2 {
    font-size: 30px;
  }
}

@import "_styleguide.scss";
